<!-- 任务抽屉（包含上传、下载任务） -->
<template>
  <a-drawer
    :open="taskListDrawerStore.taskListOptions.open"
    class="custom-class"
    :body-style="{ padding: '24px 0 0' }"
    root-class-name="root-class-name"
    placement="right"
    :closable="false"
    mask-closable
    @close="handleClose"
  >
    <div class="file-task-card">
      <div class="tabs-wrap">
        <ul class="tabs">
          <li
            class="tab-item"
            :class="[taskListDrawerStore.taskListOptions.key === '1' && 'active']"
            @click="taskListDrawerStore.changeTaskListOptions({ open: true, key: '1' })"
          >
            在线导出
          </li>
          <li
            class="tab-item"
            :class="[taskListDrawerStore.taskListOptions.key === '2' && 'active']"
            @click="taskListDrawerStore.changeTaskListOptions({ open: true, key: '2' })"
          >
            本地导出
          </li>
        </ul>
        <a-button type="text" class="icon-only-btn icon-close-btn" @click="handleClose"><i class="iconfont icon-close-line"></i></a-button>
      </div>
      <div v-show="taskListDrawerStore.taskListOptions.key === '1'" class="file-task-card-wrap">
        <line-export-list
          :data-list="taskListDrawerStore.lineDataList"
          :failed-data-list="taskListDrawerStore.failedDataList"
          @retransmission="handleRetransmission"
          @to-failed-list="handleToFailedList"
          @clear-all="taskListDrawerStore.lineClearAll"
          @remove="taskListDrawerStore.LineRemove"
        />
      </div>
      <div v-show="taskListDrawerStore.taskListOptions.key === '2'" class="file-task-card-wrap">
        <local-export-list
          :data-list="taskListDrawerStore.localDataList"
          @clear-all="taskListDrawerStore.localClearAll"
          @remove="taskListDrawerStore.localRemove"
          @download="taskListDrawerStore.localDownload"
        />
      </div>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
  import { useTaskListDrawerStore } from '../TaskListDrawer/store'

  const emits = defineEmits<{
    (e: 'close'): void
  }>()

  const taskListDrawerStore = useTaskListDrawerStore()

  const handleClose = () => {
    taskListDrawerStore.changeTaskListOptions({ open: false })
    emits('close')
  }

  /* 跳转到失败详情 */
  const handleToFailedList = (item: any) => {
    taskListDrawerStore.getFailedDataList(item.id)
  }
  /* 重传 */
  const handleRetransmission = (item: any) => {
    taskListDrawerStore.retransmission(item.id)
  }
</script>

<style lang="less" scoped>
  .file-task-card {
    display: flex;
    height: 100%;
    flex-direction: column;

    .file-task-card-wrap {
      display: flex;
      overflow: hidden;
      height: 100%;
      flex-direction: column;
    }
  }

  .icon-close-btn {
    position: absolute;
    top: 6px;
    right: 24px;
    z-index: 1;
  }

  .tabs-wrap {
    position: relative;
    padding: 0 24px 20px;
  }

  .tabs {
    display: flex;
    height: 33px;
    gap: 0 40px;

    .tab-item {
      position: relative;
      font-size: 16px;
      color: @text02;
      font-weight: 400;
      line-height: 24px;
      cursor: pointer;

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 90%;
        height: 3px;
        background-color: @primary1;
        transform: translate(-50%, 0);
      }

      &.active {
        color: @text01;
        font-weight: 700;

        &::after {
          content: '';
        }
      }
    }
  }
</style>
